<!--
  @Descripttion:用户中心-用户信息
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <div class="user-info-page">
  <pageCom>
    <div class="content-page">
      <div class="content">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'userCenter' }">
              用户中心
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{
                $route.meta.title || "--"
              }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="content-title"></div>
        <!-- <div class="infoRow">
          <div class="avatarRow">
            <div class="avatarRow_title">证件照</div>
            <div class="avatarRow_tip" v-if="!userInfo.studentPictureUrl">建议提供一寸证件照，格式支持jpg、jpeg、gif、png，大小不超过0.5m</div>
            <div class="avatarBox">
              <img
                v-if="userInfo.studentPictureUrl"
                :src="userInfo.studentPictureUrl"
                class="avatar"
              />
              <img
                v-else
                src="@/assets/images/empty-head.png"
                class="avatar"
                @click="openEditDialogHandle"
              />
            </div>
          </div>
          <div class="userinfoRow">
            <div class="userinfoRow_row" v-for="(item, index) in info" :key="index">
              <div class="userinfoRow_item" v-for="(it, i) in item" :key="i">
                <div class="userinfoRow_item_label">{{ it.label }}</div>
                <div class="userinfoRow_item_value" :class="it.isLong?'long':''">
                  {{ userInfo[it.val] || "--" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="edit-box" style="cursor: pointer"  @click="openEditDialogHandle">
          <i class="el-icon-edit"></i>编辑
        </div> -->
        <div class="infoMain">
          <div class="titles">
            个人信息
            <div class="edits" @click="openEditDialogHandle">
              <img src="../../assets/images/user/edit_icon.png" alt="" />
              编辑
            </div>
          </div>
          <div class="contents">
            <div class="imgBox">
              <img
                v-if="userInfo.studentPictureUrl"
                :src="userInfo.studentPictureUrl"
              />
              <img v-else src="../../assets/images/user/userTouXiang.png" />
              <span>证件照</span>
            </div>
            <div class="contentsRow">
              <div class="items" v-for="(item, index) in info2[0]" :key="index">
                <div class="label">{{ item.label }}</div>
                {{ userInfo[item.val] || "--" }}
              </div>
            </div>
            <div class="contentsRow row2">
              <div class="items" v-for="(item, index) in info2[1]" :key="index">
                <div class="label">{{ item.label }}</div>
                {{ userInfo[item.val] || "--" }}
              </div>
            </div>
          </div>
        </div>
        <editInfo ref="editInfo" />
      </div>
    </div>
  </pageCom>
  <MobliePage
    :userInfo="userInfo"
    :info="info2"
    @submit="submitMobile"
  />
  </div>
</template>

<script>
import pageCom from "@/components/page/index.vue";
import imageUpload from "@/components/ImageUpload/index.vue";
import editInfo from "./components/editInfo.vue";
import { mapActions, mapState } from "vuex";
import { formatTime } from "../../utils/utils";
import MobliePage from './mobile/userInfo.vue';
import moment from "moment";
export default {
  // 组件名称
  name: "userCenter",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { pageCom, imageUpload, editInfo, MobliePage },
  // 组件状态值
  data() {
    return {
      imageUrl: "",
      info2: [
        [
          {
            label: "姓名",
            val: "nickname",
          },
          {
            label: "手机号码",
            val: "mobile",
          },
          {
            label: "邮箱地址",
            val: "email",
            isLong: true,
          },
          {
            label: "身份",
            val: "identify",
          },
          {
            label: "现居住城市",
            val: "liveCity",
          },
        ],
        [
          {
            label: "性别",
            val: "sex",
          },
          {
            label: "民族",
            val: "clan",
          },
          {
            label: "出生日期",
            val: "birthday",
          },
          {
            label: "政治面貌",
            val: "political",
            isLong: true,
          },
          {
            label: "籍贯",
            val: "nativePlace",
          },
        ],
      ],
      info: [
        [
          {
            label: "姓名",
            val: "nickname",
          },
          {
            label: "性别",
            val: "sex",
          },
          {
            label: "出生日期",
            val: "birthday",
          },
        ],
        [
          {
            label: "民族",
            val: "clan",
          },
          {
            label: "政治面貌",
            val: "political",
            isLong: true,
          },
        ],
        [
          {
            label: "现居住城市",
            val: "liveCity",
          },
          {
            label: "籍贯",
            val: "nativePlace",
          },
          {
            label: "身份",
            val: "identify",
          },
        ],
        [
          {
            label: "手机号码",
            val: "mobile",
          },
          {
            label: "邮箱地址",
            val: "email",
            isLong: true,
          },
        ],
      ],
      infoVisible: false,
      userInfo: {},
    };
  },
  computed: {
    ...mapState(["USER_INFO"]),
  },
  watch: {
    USER_INFO: function (newValue, oldValue) {
      newValue.birthday =
        newValue.birthday !== null
          ? moment(newValue.birthday).format("yyyy-MM-DD")
          : "";
      // studentType 0 在校 1 应届
      newValue.identify = Number(newValue.identify) === 0 ? "在校" : "应届";
      newValue.nativePlace =
        this.fetchData(newValue.nativePlace) || newValue.nativePlace;
      this.userInfo = newValue;
    },
  },
  // 组件方法
  methods: {
    fetchData(str) {
      if (!str) return str;
      return ["北京市", "上海市", "天津市", "重庆市"].filter((v) =>
        str.includes(v)
      )[0];
    },
    openEditDialogHandle() {
      this.$refs.editInfo && this.$refs.editInfo.open();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async init() {
      await this.$store.dispatch("FETCH_USER_INFO");
    },
    submitMobile() {
      this.init()
    }
  },
  mounted() {
    this.init();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">

@media screen and (max-width: 750px) {
  #app {
    min-width: auto;
  }
  .user-info-page {
    > .page-com {
      display: none !important;
    }
    > .mobile-user-info-page {
      display: block !important;
      .btn-box {
        display: flex !important;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.content-page-com .main-com {
  min-height: inherit !important;
}
.content-page {
  position: relative;
  width: 100%;
  overflow-y: auto;
  .content {
    position: relative;
    width: 100%;
    // min-height: calc(100vh - 67px);
    margin: 0 auto;
    background: #fff;
    position: relative;
    .content-title {
      font-size: 25px;
      font-weight: 600;
      color: #37383d;
      line-height: 40px;
      margin-bottom: 30px;
    }

    .infoMain {
      width: 100%;
      border: 1px solid #dfdfdf;
      .titles {
        width: 100%;
        height: 74px;
        background: rgb(237, 242, 249);
        padding: 0 50px;
        padding-right: 103px;
        font-size: 24px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #838282;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .edits {
          display: flex;
          align-items: center;
          font-size: 18px;
          color: #25589f;
          cursor: pointer;
          img {
            width: 26px;
            height: 26px;
            margin-right: 9px;
          }
        }
      }
      .contents {
        width: 100%;
        padding: 50px 100px;
        padding-left: 314px;
        position: relative;
        display: flex;
        justify-content: space-between;
        .imgBox {
          width: 128px;
          position: absolute;
          top: calc(50% - 38px);
          transform: translateY(-50%);
          left: 100px;
          height: 128px;
          img {
            width: 100%;
            display: block;
            height: 128px;
          }
          span {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -40px;
            font-size: 18px;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: #000000;
            // margin-top: 20px;
          }
        }
        .contentsRow {
          width: 343px;
          position: relative;
          .items {
            width: 100%;
            display: block;
            padding-left: 110px;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #d9d9d9;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 18px;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            color: #838282;
            line-height: 20px;
            min-height: 20px;
            .label {
              width: 90px;
              position: absolute;
              font-weight: 400;
              color: #000;
              left: 0;
              top: 0;
            }
          }
        }
      }
    }
    .explan-content {
      width: 180px;
      height: 210px;
      font-size: 24px;
      color: #37383d;
      line-height: 33px;
      text-align: center;
      margin-top: 25px;
    }
    .edit-box {
      display: flex;
      align-items: center;
      position: absolute;
      top: 50px;
      right: 0;
      font-size: 16px;
      font-weight: 500;
      color: #2f8efe;
      vertical-align: middle;
      .el-icon-edit {
        color: #2f8efe;
        margin-right: 10px;
        font-size: 16px;
      }
    }
    .infoRow {
      width: 100%;
      border: 1px solid #d4d6da;
      .avatarRow {
        width: 100%;
        padding: 25px 30px 30px;
        height: 205px;
        position: relative;
        .avatarRow_title {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 28px;
          margin-bottom: 10px;
        }
        .avatarRow_tip {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 20px;
        }
        .avatarBox {
          width: 127px;
          height: 148px;
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .avatar {
            width: 100%;
          }
        }
      }
      .userinfoRow {
        width: 100%;
        border-top: 1px solid #d4d6da;
        .userinfoRow_row {
          width: 100%;
          border-bottom: 1px solid #d4d6da;
          display: flex;
          &:last-child {
            border: none;
          }
          .userinfoRow_item {
            display: flex;
            border-right: 1px solid #d4d6da;
            &:last-child {
              border: none;
            }
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 28px;
            .userinfoRow_item_label {
              border-right: 1px solid #d4d6da;
              height: 100%;
              width: 110px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #f5f8fa;
            }
            .userinfoRow_item_value {
              min-height: 60px;
              width: 230px;
              display: flex;
              align-items: center;
              padding: 10px 0;
              padding-left: 60px;
              padding-right: 20px;
              word-break: break-all;
              // overflow: hidden;
              // white-space: nowrap;
              // text-overflow: ellipsis;
              &.long {
                width: 539px;
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #9597a0;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 210px;
  line-height: 210px;
  text-align: center;
}
/deep/ .avatar {
  display: block;
  width: 127px;
  height: 148px;
}
</style>
